<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .router-link-active{
            background: red;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>开始学习路由啦</h1>
        <router-link to="/home" tag="button">去home页</router-link>
        <router-link to="/news" tag="button">去新闻页</router-link>
        <hr>
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        let Home = {
            template:`
                <h1> home组件 </h1>
            `
        }
        let News = {
            template:`
                <div>
                    <h1> news组件 </h1>
                    <router-link to="/news/nativeNews">国内新闻</router-link>
                    <router-link to="/news/abroadNews">国外新闻</router-link>
                    <hr>
                    <router-view />
                </div>
            `
        }

        let NativeNews = {
            template:`
                <h3>国内新闻</h3>
            `
        }

        let AbroadNews = {
            template:`
                <h3>国外新闻</h3>
            `
        }

        const routes = [
            {
                path:"/",
                redirect:"/home"
            },
            {
                path:"/home",
                component:Home
            },
            {
                path:"/news",
                component:News,
                children:[
                    /* {
                        path:"/news",
                        redirect:"/news/nativeNews"
                    }, */
                    {
                        path:"",
                        component:NativeNews
                    },
                    {
                        path:"/news/nativeNews",
                        component:NativeNews
                    },{
                        path:"/news/abroadNews",
                        component:AbroadNews
                    }
                ]
            }
        ];
        const router = new VueRouter({
            routes
        });
        let vm = new Vue({
            el:"#app",
            router
        })
        /* 
         hash 模式
         根据 url hash值得变化 来 匹配不同的组件
         window.onhashchange
         */
    </script>
</body>
</html>